<template>
  <j-modal
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :title="title"
    :visible="visible"
    :width="width"
    switchFullscreen
    @cancel="handleCancel"
  >
    <template slot="footer">
      <a-button v-if="current == 1" key="back" @click="prev">
        上一步
      </a-button>
      <a-button v-if="current == 0" type="primary" @click="next">
        下一步
      </a-button>
      <a-button v-if="current == 1" key="submit" :loading="confirmLoading" type="primary" @click="handleOk">
        提交
      </a-button>

    </template>
    <a-spin :spinning="confirmLoading" style="margin: 0 40px">
      <a-steps :current="current" size="small">
        <a-step title="填写信息"/>
        <a-step title="生成订单"/>
      </a-steps>
      <div v-if="current == 0" class="steps-content">
        <div style="margin-top: 20px; ">
          <a-form-model
            ref="ruleForm"
            :label-col="labelCol"
            :model="model"
            :rules="rules" :wrapper-col="wrapperCol"
          >
            <a-row justify="space-between" type="flex">
              <a-col :span="24"
                     style="text-align: center;margin:0 0 10px 0;font-size: 16px;font-weight: bold;color: black">
                基本信息
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="订单种类" prop="orderType">
                  <a-radio-group v-model="value" @change="onChangeOrderType">
                    <a-radio :value="0">
                      库房现货
                    </a-radio>
                    <a-radio :value="1">
                      期货预定
                    </a-radio>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="选择车辆类别" prop="vehicleType">
                  <a-select v-model="model.vehicleType" placeholder="请选择车辆类别">
                    <a-select-option value="0">
                      乘用汽车
                    </a-select-option>
                    <a-select-option value="商用汽车">
                      商用汽车
                    </a-select-option>
                    <a-select-option value="半挂汽车">
                      半挂汽车
                    </a-select-option>
                    <a-select-option value="二类底盘">
                      二类底盘
                    </a-select-option>
                    <a-select-option value="专用汽车">
                      专用汽车
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="客户订购日期" prop="orderDate">
                  <a-date-picker
                    v-model="model.orderDate"
                    format="YYYY-MM-DD"
                    style="width: 100%"
                    @openChange="onChangeDate"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="购车人名称" prop="customerName">
                  <a-input v-model="model.customerName" allow-clear placeholder="请输入购车人名称"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="购车人证件号码" prop="idcard">
                  <a-input v-model="model.idcard" allow-clear placeholder="请输入购车人证件号码"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="客户手机号码" prop="phoneNum">
                  <a-input v-model="model.phoneNum" allow-clear placeholder="请输入客户手机号码"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="其他联系方式" prop="otherContactWays">
                  <a-input v-model="model.otherContactWays" allow-clear placeholder="请输入其他联系方式"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="购车客户地址" prop="address">
                  <a-input v-model="model.address" allow-clear placeholder="请输入购车客户地址"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24"
                     style="text-align: center;margin:0 0 10px 0;font-size: 16px;font-weight: bold;color: black">
                牵引车登记
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="牵引车识别代码" prop="vin">
                  <a-input v-model="model.vin" allow-clear placeholder="请输入识别代码"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="车辆产品名称" prop="tractorProductName">
                  <a-input v-model="model.tractorProductName" allow-clear placeholder="请输入车辆产品名称"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="发动机号码" prop="engineNum">
                  <a-input v-model="model.engineNum" allow-clear placeholder="请输入发动机号码"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="车辆中文品牌" prop="tractorBrandInCN">
                  <a-input v-model="model.tractorBrandInCN" allow-clear placeholder="请输入车辆中文品牌"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="车辆颜色要求" prop="tractorColorRequired">
                  <a-input v-model="model.tractorColorRequired" allow-clear placeholder="请输入车辆颜色要求"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="车辆(公告)型号" prop="tractorVehicleModel">
                  <a-input v-model="model.tractorVehicleModel" allow-clear placeholder="请输入车辆型号"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="车辆发动机型号" prop="engineType">
                  <a-input v-model="model.engineType" allow-clear placeholder="请输入车辆发动机型号"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="变速箱型号" prop="gearboxModel">
                  <a-input v-model="model.gearboxModel" allow-clear placeholder="请输入变速箱型号"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="发动机排放" prop="discharge">
                  <a-input v-model="model.discharge" allow-clear placeholder="请输入发动机排放"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="车辆前桥型号" prop="frontAxle">
                  <a-input v-model="model.frontAxle" allow-clear placeholder="请输入车辆前桥型号"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="车辆后桥型号" prop="backAxle">
                  <a-input v-model="model.backAxle" allow-clear placeholder="请输入车辆后桥型号"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="轮胎型号" prop="tractorWheelModel">
                  <a-input v-model="model.tractorWheelModel" allow-clear placeholder="请输入轮胎型号"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="牵引车销售价" prop="tractorPrice">
                  <a-input v-model="model.tractorPrice" allow-clear placeholder="请输入牵引车销售价"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24"
                     style="text-align: center;margin:0 0 10px 0;font-size: 16px;font-weight: bold;color: black">
                挂车登记
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="车辆产品名称" prop="trailerProductName">
                  <a-input v-model="model.trailerProductName" allow-clear placeholder="请输入车辆产品名称"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="车辆中文品牌" prop="trailerBrandInCN">
                  <a-input v-model="model.trailerBrandInCN" allow-clear placeholder="请输入车辆中文品牌"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="车辆(公告)型号" prop="trailerVehicleModel">
                  <a-input v-model="model.trailerVehicleModel" allow-clear placeholder="请输入车辆型号"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="车辆生产企业" prop="engineType">
                  <a-input v-model="model.engineType" allow-clear placeholder="请输入车辆生产企业"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="外形长宽高" prop="gearboxModel">
                  <a-input v-model="model.gearboxModel" allow-clear placeholder="请输入外形长宽高"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="货箱长宽高" prop="manned">
                  <a-input v-model="model.manned" allow-clear placeholder="请输入货箱长宽高"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="罐体容量" prop="manned">
                  <a-input v-model="model.manned" allow-clear placeholder="请输入罐体容量"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="轮胎型号" prop="trailerWheelModel">
                  <a-input v-model="model.trailerWheelModel" allow-clear placeholder="请输入轮胎型号"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="汽车公告批次" prop="batch">
                  <a-input v-model="model.batch" allow-clear placeholder="请输入汽车批次"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="车辆颜色要求" prop="trailerColorRequired">
                  <a-input v-model="model.trailerColorRequired" allow-clear placeholder="请输入车辆颜色要求"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="挂车销售价" prop="trailerPrice">
                  <a-input v-model="model.trailerPrice" allow-clear placeholder="请输入挂车销售价"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :span="24"
                     style="text-align: center;margin:0 0 10px 0;font-size: 16px;font-weight: bold;color: black">
                其他信息
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="车辆交付日期" prop="deliverDate">
                  <a-date-picker
                    v-model="model.deliverDate"
                    format="YYYY-MM-DD"
                    style="width: 100%"
                    @openChange="onChangeDeliverDate"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="交车地点" prop="deliverPlace">
                  <a-select v-model="model.deliverPlace" placeholder="请选择交车地点">
                    <a-select-option value="到厂方自提">
                      到厂方自提
                    </a-select-option>
                    <a-select-option value="本公司仓库">
                      本公司仓库
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="11">
                <a-form-model-item label="销售员" prop="seller">
                  <a-select v-model="model.seller" placeholder="请选择销售员">
                    <a-select-option value="乘用汽车">
                      乘用汽车
                    </a-select-option>
                    <a-select-option value="商用汽车">
                      商用汽车
                    </a-select-option>
                    <a-select-option value="半挂汽车">
                      半挂汽车
                    </a-select-option>
                    <a-select-option value="二类底盘">
                      二类底盘
                    </a-select-option>
                    <a-select-option value="专用汽车">
                      专用汽车
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </div>
      </div>
      <div v-if="current == 1" class="steps-content">
        <div class="form" style="background-color: white;padding: 20px 30px;border-radius: 5px;">
          <!--顶部左右部分-->
          <a-row class="form" justify="space-between" type="flex">
            <a-col :span="4" class="formTopLeft">
              订购日期：{{ model.orderDate }}
            </a-col>
            <a-col :span="4" class="formTopLeft" style="text-align: right">
              客户订单编号：{{ }}
            </a-col>
          </a-row>
          <!--表内开始-->
          <!--第一行-->
          <div style="margin: 5px 0">
            <a-row class="formBorder1st">
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                车辆销售单位名称
              </a-col>
              <a-col :span="9" class="notRight formInlineHeight">

              </a-col>
              <a-col :span="6" class="notRight formInlineHeight" style="text-align: right">
                销售单位电话
              </a-col>
              <a-col :span="6" class="formInlineHeight">

              </a-col>
            </a-row>
            <!--第二行-->
            <a-row class="formBorder">
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                购车人名称
              </a-col>
              <a-col :span="9" class="notRight formInlineHeight">
                {{ model.customerName }}
              </a-col>
              <a-col :span="6" class="notRight formInlineHeight" style="text-align: right">
                客户手机号码
              </a-col>
              <a-col :span="6" class="formInlineHeight">
                {{ model.phoneNum }}
              </a-col>
            </a-row>
            <!--第三行-->
            <a-row class="formBorder">
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                购车人证件号码
              </a-col>
              <a-col :span="9" class="notRight formInlineHeight">
                {{ model.idcard }}
              </a-col>
              <a-col :span="6" class="notRight formInlineHeight" style="text-align: right">
                其他联系方式
              </a-col>
              <a-col :span="6" class="formInlineHeight">
                {{ model.otherContactWays }}
              </a-col>
            </a-row>
            <!--第四行-->
            <a-row class="formBorder">
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                购车客户地址
              </a-col>
              <a-col :span="9" class="notRight formInlineHeight">
                {{ model.address }}
              </a-col>
              <a-col :span="6" class="notRight formInlineHeight" style="text-align: right">
                订单种类
              </a-col>
              <a-col :span="6" class="formInlineHeight">
                {{ model.orderType }}
              </a-col>
            </a-row>
            <!--第五行-->
            <a-row class="formBorder">
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                识别代码(VIN)
              </a-col>
              <a-col :span="9" class="notRight formInlineHeight">
                {{ model.vin }}
              </a-col>
              <a-col :span="6" class="notRight formInlineHeight" style="text-align: right">
                发动机号码
              </a-col>
              <a-col :span="6" class="formInlineHeight">
                {{ model.engineNum }}
              </a-col>
            </a-row>
            <!--   车辆配置基本要求     -->
            <a-row class="formBorder">
              <a-col :span="24" class="formInlineHeight" style="text-align: center;font-size: 16px;color: black">
                车辆配置基本要求
              </a-col>
            </a-row>
            <!--    基本要求line1      -->
            <a-row class="formBorder">
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                车辆(公告)型号
              </a-col>
              <a-col :span="9" class="notRight formInlineHeight">
                {{ model.vehicleModel }}
              </a-col>
              <a-col :span="6" class="notRight formInlineHeight" style="text-align: right">
                车辆颜色要求
              </a-col>
              <a-col :span="6" class="formInlineHeight">
                {{ model.colorRequired }}
              </a-col>
            </a-row>
            <!--    基本要求line2      -->
            <a-row class="formBorder">
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                车辆产品名称
              </a-col>
              <a-col :span="9" class="notRight formInlineHeight">
                {{ model.productName }}
              </a-col>
              <a-col :span="6" class="notRight formInlineHeight" style="text-align: right">
                车辆中文品牌
              </a-col>
              <a-col :span="6" class="formInlineHeight">
                {{ model.brandInCN }}
              </a-col>
            </a-row>
            <!--    基本要求line3     -->
            <a-row class="formBorder">
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                车辆燃料种类
              </a-col>
              <a-col :span="9" class="notRight formInlineHeight">
                {{ model.fuelType }}
              </a-col>
              <a-col :span="6" class="notRight formInlineHeight" style="text-align: right">
                变速箱型号
              </a-col>
              <a-col :span="6" class="formInlineHeight">
                {{ model.gearboxModel }}
              </a-col>
            </a-row>
            <!--    基本要求line4      -->
            <a-row class="formBorder">
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                车辆载客(人)
              </a-col>
              <a-col :span="9" class="notRight formInlineHeight">
                {{ model.manned }}
              </a-col>
              <a-col :span="6" class="notRight formInlineHeight" style="text-align: right">
                发动车型号
              </a-col>
              <a-col :span="6" class="formInlineHeight">
                {{ model.engineType }}
              </a-col>
            </a-row>
            <!--    基本要求line5     -->
            <a-row class="formBorder">
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                发动车排放
              </a-col>
              <a-col :span="9" class="notRight formInlineHeight">
                {{ model.sweptVolume }}
              </a-col>
              <a-col :span="6" class="notRight formInlineHeight" style="text-align: right">
                车辆轮胎型号
              </a-col>
              <a-col :span="6" class="formInlineHeight">
                {{ model.wheelType }}
              </a-col>
            </a-row>
            <a-row class="formBorder" style="height: 50px;">
              <a-col :span="3" class="notRight formInlineHeight_high" style="text-align: right;line-height: 43px;">
                客户其他要求
              </a-col>
              <a-col :span="21" class="formInlineHeight_high"
                     style="position: relative;top: 50%;transform: translateY(-50%);">

              </a-col>
            </a-row>
            <!--交付时间-->
            <a-row class="formBorder">
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                车辆应交付时间
              </a-col>
              <a-col :span="9" class="notRight formInlineHeight">
                {{ model.deliverDate }}
              </a-col>
              <a-col :span="6" class="notRight formInlineHeight" style="text-align: right">
                交车时间
              </a-col>
              <a-col :span="6" class="formInlineHeight">
                {{ model.deliverDate }}
              </a-col>
            </a-row>
            <!--价格-->
            <a-row class="formBorder">
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                <span style="color: red">*</span>车辆销售价
              </a-col>
              <a-col :span="9" class="notRight formInlineHeight">
                <input v-model="model.vehiclePrice" placeholder="请输入车辆销售价"
                       style="width: 100%;border: none;outline: none"></input>
              </a-col>
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                订金(元)
              </a-col>
              <a-col :span="3" class="notRight formInlineHeight">
                <input v-model="model.subscription" placeholder="无订金可不填"
                       style="width: 100%;border: none;outline: none"></input>
              </a-col>
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                尚欠车款(元)
              </a-col>
              <a-col :span="3" class="formInlineHeight">
                {{ model.vehiclePrice }}
              </a-col>
            </a-row>
            <!--交费明细-->
            <a-row class="formBorder">
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                代收保险费(元)
              </a-col>
              <a-col :span="3" class="notRight formInlineHeight">
                {{ model.insurrance }}
              </a-col>
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                代收购置税(元)
              </a-col>
              <a-col :span="3" class="notRight formInlineHeight">
                {{ model.purchaseTax }}
              </a-col>
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                另付上户代办费(元)
              </a-col>
              <a-col :span="3" class="notRight formInlineHeight">
                {{ model.agencyFee }}
              </a-col>
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                销售费用合计(元)
              </a-col>
              <a-col :span="3" class="formInlineHeight">
                {{ model.vehiclePrice }}
              </a-col>
            </a-row>
            <!--开票类型-->
            <a-row class="formBorder">
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                <span style="color: red">*</span>客户开票类型
              </a-col>
              <a-col :span="12" class="notRight formInlineHeight">
                <a-radio-group v-model="model.ticketValue" @change="onChange">
                  <a-radio :value="1">
                    机动车专用发票
                  </a-radio>
                  <a-radio :value="2">
                    增值税发票
                  </a-radio>
                  <a-radio :value="3">
                    不需要发票
                  </a-radio>
                </a-radio-group>
              </a-col>
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                销售发票编号
              </a-col>
              <a-col :span="6" class="formInlineHeight">
                {{ }}
              </a-col>
            </a-row>
            <a-row class="formBorder" style="height: 400px;">
              <a-col :span="3" class="notRight formInlineHeight_high" style="text-align: right;line-height: 391px;">
                客户其他要求
              </a-col>
              <a-col :span="21" class="formInlineHeight_high"
                     style="position: relative;top: 50%;transform: translateY(-50%);">
                1、质量要求技术标准:按中华人民共和国标准《机动车安全运行技术条件》(GB7258-2017)文件规定及汽车厂三包规定执行: 因车辆
                受机动车公告限制，购车人延期提车或提车后不立即上牌，因公告过期造成车辆无法上牌的损失由购车人自行承担，
                车辆销售单位不承担任何责任;<br/>
                2、验收标准、方法及提出异议期限:按照合同订单配置交付车辆，购车人签收提车即视为车辆符合要求无异议;<br/>
                3、购车人必须在约定的交付时间内缴纳剩余车款并提车，逾期不办理提车和补交余款，
                视为购车人违约，经销商可以将购车人订购车辆优先销售给其他客户，经销商给购车人重新更换相同配置的车辆，
                因购车客户的原因造成延期交付车辆，责任全部由购车客户负责，经销商不承招讳约责任;<br/>
                4、购车人到汽车厂家自提车辆时，车辆及途中安全责任由购车人自行负责，经销商不承担任何责任;<br/>
                5、标的物所有权:标的物所有权自购车人付清全部车款时转移，若购车人未履行支付全部车款义务，
                贷款购车的资金暂时未到账，车辆所有权属于经销商，经销商必须收到车辆的全部车款及相关费用才能向购车人交付车辆;<br/>
                6、本合同签订后，需经销商加盖公司印章，购车客户按照合同付款时订单即刻生效，公司将给客户开具缴款收据，
                缴款收据作为购车客户订车生效凭据:合同签订后若客户未按照约定项目缴款，本订单无效;<br/>
                7、双方保证合同中提供的通许地址联系电话真实可靠，作为双方签收各项文书的法律依据(包含诉状、
                保险单、信画、车辆发票车辆合格证等)，因为其中一方通讯地址或联系方式发生改变，造成无法签收时，
                均视为送达;<br/>
                8、违约责任及解决合同纠纷方式:本合同严格按照购车人的要求订购，
                若因购车人在约定的车辆交付时间内不提车，不支付车辆余款，视为购车人违约，
                购车人自愿终止合同不愿意再继续展行购车合同，双方无需另行申明:对此，经销商不再受合同的约束，
                但购车人必须按照下列要求向经销商承担相应的责任:A、购车人给经销商造成的实际经济损失小于或等于订金时，
                经销商收取的订金不再退还:B、购车人给经销商造成的实际经济损失大于订金时，经销商收取的订金不再退还外，
                购车人还应赔偿经销商的实际经济损失;C双方确认实际经济损失包括但不限于车辆的改装费、车辆保管费(停车费)、
                车辆上牌发生的费用、以及诉讼发生的律师费等;<br/>
                9、解决争议方式:双方协商解决，协商不成由经销商所在地人民法院提起诉讼，双方不持异议;
              </a-col>
            </a-row>
            <a-row class="formBorder">
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                销售员
              </a-col>
              <a-col :span="3" class="notRight formInlineHeight">
                {{ model.seller }}
              </a-col>
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                汽车销售部门
              </a-col>
              <a-col :span="3" class="notRight formInlineHeight">
                {{ model.sellDepartment }}
              </a-col>
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                主管签字
              </a-col>
              <a-col :span="3" class="notRight formInlineHeight">

              </a-col>
              <a-col :span="3" class="notRight formInlineHeight" style="text-align: right">
                用户签字
              </a-col>
              <a-col :span="3" class="formInlineHeight">

              </a-col>
            </a-row>
          </div>
          <a-row class="form" justify="space-between" type="flex">
            <a-col :span="4" class="formTopLeft">
              修改日期：{{ }}
            </a-col>
            <a-col :span="4" class="formTopLeft" style="text-align: right">
              修改人：{{ }}
            </a-col>
          </a-row>
        </div>
      </div>
    </a-spin>
    <!--    <a-button type="primary" @click="saveDraft">暂存</a-button>-->
  </j-modal>
</template>

<script>
import { getAction, httpAction } from '@/api/manage'
import moment from 'moment'

export default {
  name: 'SalesRegisFormModel',
  data() {
    return {
      width: 1000,
      current: 0,
      value: 0,
      title: '交易信息',
      visible: false,
      model: {
        orderType: '库房现货'
      },
      loading: '',
      saleSource: [],
      SaleInfosLike: [],
      labelCol: {
        span: 8
      },
      wrapperCol: {
        span: 15
      },
      rules:
        {
          //车管验证条件
          orderType: [{ required: true, message: '请选择订单类型', trigger: 'blur' }],
          vehicleType: [{ required: true, message: '请选择车辆类别', trigger: 'blur' }],
          orderDate: [{ required: true, message: '请选择订购日期', trigger: 'blur' }],
          customerName: [{ required: true, message: '请选择购车人名称', trigger: 'blur' }],
          idcard: [{ required: true, message: '请输入购车人证件号码', trigger: 'blur' }],
          phoneNum: [{ required: true, message: '请输入客户手机号码', trigger: 'blur' }],
          address: [{ required: true, message: '请输入购车客户地址', trigger: 'blur' }],
          vin: [{ required: true, message: '请输入识别代码', trigger: 'blur' }],
          deliverDate: [{ required: true, message: '请选择交付时间', trigger: 'blur' }],
          deliverPlace: [{ required: true, message: '请选择交付地点', trigger: 'blur' }],
          seller: [{ required: true, message: '请选择销售员', trigger: 'blur' }],
          cllx: [{ required: true, message: '请选择车辆类型', trigger: 'blur' }],
          ppxh: [{ required: true, message: '请输入品牌型号', trigger: 'blur' }],
          fdjh: [{ required: true, message: '请输入发动机号', trigger: 'blur' }],
          syxz: [{ required: true, message: '请选择使用性质', trigger: 'blur' }],
          ryzl: [{ required: true, message: '请选择燃油种类', trigger: 'blur' }],
          dllb: [{ required: true, message: '请选择动力类别', trigger: 'blur' }],
          zws: [{ required: true, message: '请输入核定载人数', trigger: 'blur' }],
          zzl: [{ required: true, message: '请输入总质量', trigger: 'blur' }],
          ccdjrq: [{ required: true, message: '请选择注册登记日期', trigger: 'blur' }],
          zbzl: [{ required: true, message: '请输入整备质量', trigger: 'blur' }],
          isxny: [{ required: true, message: '请选择是否有动力电池', trigger: 'blur' }],
          dcbm: [{ required: true, message: '请输入电池编号', trigger: 'blur' }],
          dclx: [{ required: true, message: '请输入电池类型', trigger: 'blur' }],
          syr: [{ required: true, message: '请输入车主/企业名', trigger: 'blur' }],
          sfzmmc: [{ required: true, message: '请输入证件类型', trigger: 'blur' }],
          sfzmhm: [{ required: true, message: '请输入证件号码', trigger: 'blur' }],
          dz: [{ required: true, message: '请输入住所地址', trigger: 'blur' }],
          dh: [{ required: true, message: '请输入车主电话', trigger: 'blur' }],
          zybm: [{ required: true, message: '请输入邮政编码', trigger: 'blur' }]
        },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: '/cxm/cxmOrderManager/add',
        edit: '/cxm/cxmOrderManager/edit',
        saveDraft: 'cxm/cxmCommonBusiness/saveDraft',
        getDraft: 'cxm/cxmCommonBusiness/getDraft',
        getSaleInfosLike: 'cxm/cxmSalesInfo/getSaleInfosLike',
        getSaleInfos: '/cxm/cxmOrderManager/getSaleInfos'
      },
      showDing: false,
      showEnterpriseUscc: false
    }
  },
  created() {
  },
  methods: {
    onChange() {

    },

    prev() {
      this.current--
      this.width = 1000
    },
    next() {
      this.$refs.ruleForm.validate(valid => {
        console.log(valid)
        if (valid) {
          this.current++
          if (this.model.orderDate) {
            this.model.orderDate = moment(this.model.orderDate._d).format('YYYY-MM-DD')
            console.log(this.model.orderDate)
          }

          if (this.value == 0) {
            this.model.orderType = '库房现货'
          } else if (this.value == 1) {
            this.model.orderType = '期货预定'
          }

          this.width = 1300
        }
      })
    },
    onChangeOrderType() {
      console.log(this.model)
    },

    onChangeDate() {
      setTimeout(this.validate_Date, 500)
    },
    validate_Date() {
      this.$refs['ruleForm'].validateField('orderDate')
    },

    onChangeDeliverDate() {
      setTimeout(this.validate_Date2, 500)
    },
    validate_Date2() {
      this.$refs['ruleForm'].validateField('deliverDate')

    },
    saleSelect(value) {
      console.log('saleSelect', value)
      for (let i = 0; i < this.SaleInfosLike.length; i++) {
        if (this.SaleInfosLike[i].salesName == value) {
          this.form.setFieldsValue({
            salesPhone: this.SaleInfosLike[i].salesPhone
          })
        }
      }
    },
    saleChange() {
      setTimeout(() => {
        console.log(this.form.getFieldValue('salesName'))
        let httpurl = this.url.getSaleInfosLike
        let params = {
          salesName: this.form.getFieldValue('salesName')
        }
        getAction(httpurl, params).then((res) => {
          /* res = {};
          res.success = true; */
          if (res.success) {
            /* res.result = [{
              "salesName": "刘里2",
              "salesPhone": "1321321321323"
            }, {
              "salesName": "刘醒2",
              "salesPhone": "1545454541212"
            }]; */
            this.SaleInfosLike = res.result
            this.saleSource = []
            for (let i = 0; i < res.result.length; i++) {
              this.saleSource.push(res.result[i].salesName)
              if (i > 8) {
                break
              }
            }
          }
        })
      }, 100)
    },
    changeDepositNotes(val) {
      if (val == '不可退') {
        this.showDing = true
      } else {
        this.showDing = false
      }
    },
    add() {
      const that = this
      let httpurl = this.url.getDraft
      let params = {
        bType: 'order'
      }
      that.edit()
      // getAction(httpurl, params).then((res) => {
      //   if (res.success) {
      //     if (res.result) {
      //       that.edit(JSON.parse(res.result))
      //     } else {
      //       getAction(that.url.getSaleInfos, params).then((res) => {
      //         that.edit(res.result)
      //       })
      //     }
      //   } else {
      //     that.edit({})
      //   }
      // })
    },
    edit(record) {
      // console.log(record)
      // this.form.resetFields()
      // this.model = Object.assign({}, record)
      // console.log(this.model)
      this.visible = true
      // this.$nextTick(() => {
      //   this.form.setFieldsValue({
      //     batteryNumber: this.model.batteryNumber,
      //     businessAddress: this.model.businessAddress,
      //     carBrand: this.model.carBrand,
      //     carColor: this.model.carColor,
      //     carModel: this.model.carModel,
      //     carType: this.model.carModel,
      //     carTypeConfiguration: this.model.carTypeConfiguration,
      //     carVin: this.model.carVin,
      //     depositAttribute: this.model.depositAttribute,
      //     depositContent: this.model.depositContent,
      //     documentNumber: this.model.documentNumber,
      //     documentType: this.model.documentType,
      //     engineNumber: this.model.engineNumber,
      //     enterpriseId: this.model.enterpriseId,
      //     enterpriseName: this.model.enterpriseName,
      //     enterpriseUscc: this.model.enterpriseUscc,
      //     epositAmount: this.model.epositAmount,
      //     fuelType: this.model.fuelType,
      //     importEngineNumber: this.model.importEngineNumber,
      //     importProveNumber: this.model.importProveNumber,
      //     interiorColor: this.model.interiorColor,
      //     isNewCar: this.model.isNewCar,
      //     orderDate: this.model.orderDate ? moment(this.model.orderDate) : null,
      //     orderNumber: this.model.orderNumber,
      //     operationAddr: this.model.operationAddr,
      //     ownerName: this.model.ownerName,
      //     ownerPhone: this.model.ownerPhone,
      //     qualifiedNumber: this.model.qualifiedNumber,
      //     quoteAmount: this.model.quoteAmount,
      //     registerDistinct: this.model.registerDistinct,
      //     salesName: this.model.salesName,
      //     salesPhone: this.model.salesPhone
      //   })
      // })
      // if (this.model.enterpriseUscc) {
      //   this.showEnterpriseUscc = true
      // } else {
      //   this.showEnterpriseUscc = false
      // }

    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      this.$message.success('提交成功')
      this.close()
      // 触发表单验证
      // this.form.validateFields((err, values) => {
      //
      //   if (!err) {
      //     that.confirmLoading = true
      //     let httpurl = ''
      //     let method = ''
      //     if (!this.model.id) {
      //       httpurl += this.url.add
      //
      //       method = 'post'
      //     } else {
      //       httpurl += this.url.edit
      //       method = 'put'
      //     }
      //     let formData = Object.assign(this.model, values)
      //     //时间格式化
      //     formData.orderDate = formData.orderDate ? formData.orderDate.format('YYYY-MM-DD HH:mm:ss') : null
      //
      //     httpAction(httpurl, formData, method)
      //       .then((res) => {
      //         if (res.success) {
      //           that.$message.success(res.message)
      //           that.$emit('ok')
      //         } else {
      //           that.$message.warning(res.message)
      //         }
      //       })
      //       .finally(() => {
      //         that.confirmLoading = false
      //         that.close()
      //       })
      //   }
      // })

    },
    saveDraft() {
      const that = this
      this.form.validateFields((err, values) => {
        let formData = Object.assign(this.model, values)
        //时间格式化
        formData.orderDate = formData.orderDate ? formData.orderDate.format('YYYY-MM-DD HH:mm:ss') : null
        let httpurl = this.url.saveDraft

        console.log(JSON.stringify(formData))
        let Data = {}
        Data.btype = 'order'
        Data.content = JSON.stringify(formData)
        console.log(Data)
        httpAction(httpurl, Data, 'post')
          .then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          })
          .finally(() => {
            that.confirmLoading = false
            that.close()
          })
      })

    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-form-item {
  margin-bottom: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #000;
  border-collapse: collapse;
}


.formBorder1st {
  border: 1px solid #000
}

.formBorder {
  border: 1px solid #000;
  border-top: none
}

.notRight {
  border-right: 1px solid #000;
}

.formInlineHeight {
  padding: 4px 5px;
  height: 30px;
}

.formInlineHeight_high {
  padding: 4px 5px;
}
</style>